<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡口过车量</title>
    <link rel="stylesheet" href="../../../css/main.css">
    <script src="../../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../mapData/js/echarts/echarts.js"></script>
</head>
<body>
<div id="kakouMap" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    var mapOption;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。

    var data = [{name:"大罗",value:[113.169518,36.169646,123]},
        {name:"康宝幼儿园",value:[113.091896,36.213734,213121]},
        {name:"潞州宴",value:[113.123375,36.218933,2331]},
        {name:"紫金房豆捞",value:[113.097880,36.200115,4453]},
        {name:"南街新华书店",value:[113.103539,36.181983,3432]},
        {name:"八一广场西口",value:[113.113045,36.203480,565654]},
        {name:"309张公庄路口",value:[113.070768,36.191907,234234242]},
        {name:"黄碾",value:[113.118933,36.363802,121]},
        {name:"金威名店十字路口",value:[113.104126,36.182400,2]},
        {name:"长治市堠北庄镇张祖村民委员会",value:[113.033550,36.241394,343]},
        {name:"长北晋东南幼师",value:[113.115295,36.298479,454]},
        {name:"清华十字",value:[113.103274,36.156168,564]},
        {name:"惠丰西街",value:[113.114885,36.145822,654]},
        {name:"河头村路口",value:[113.137613,36.185348,5443]},
        {name:"中潞冰河酒店",value:[113.121938,36.187258,67675]},
        {name:"潞卓广场",value:[113.117810,36.213940,23121]},
        {name:"妇幼保健院－孕产妇抢救中心",value:[113.199020,336.106064,332332]},
        {name:"黄碾九天家具门口",value:[113.117152,36.363996,454]},
        {name:"凹里坡下",value:[113.083780,36.274985,878]},
        {name:"西南关小区",value:[113.091035,36.169083,9898]}];

    var mapChart = echarts.init(document.getElementById('kakouMap'));// 初始化echarts对象为mapChart

    /*
     * 读取echarts Option配置数据
     */
    $(function()
    {
        getOption();
    });
    /*
     * 读取echarts Option配置数据
     */
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../../config/textLable_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            mapOption = option;
            getMap();
        });
    }
    /*
     * 读取geo地图数据并注入echarts api
     */
    function getMap()
    {
        // 数据加载项，增强用户体验
        mapChart.showLoading();
        // 地图json文件的地址
        var mapUrl = "../../../mapData/map/json/shanxi/changzhi.json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            echarts.registerMap("chanzghi", json); // 注册地图
            mapOption.geo.map = "chanzghi"; // 设置geo坐标系地图名称
            mapOption.geo.zoom = 8; // 设置地图缩放等级
            mapOption.geo.center = [113.101211,36.218388];// 设置地图中心点
            mapOption.visualMap = "";//由于此处不需要值域渐变，所以设置为空
            mapOption.legend.data = ["图例1","图例2","图例3"];//图例data设置
            mapOption.legend.x = "middle";//图例x轴位置 左、中、右英文
            mapOption.legend.y = "bottom";//图例y轴位置 上、中、下英文
            /*
             * 系列一数据和图标设置
             */
            mapOption.series[0].type = "scatter";//自定义图标类型，此处可以设置scatter、effectScatter。
            mapOption.series[0].symbol = "";//自定义点位图标。
            mapOption.series[0].symbolSize = 5;// 设置图标大小,此处可以是数字或者数组
            mapOption.series[0].label.normal.formatter = displayContent;// 设置文本域标签内容展示
            mapOption.tooltip.formatter = displayContent;// 设置鼠标移上内容展示
            mapOption.series[0].data = data; // 设置业务数据
            mapOption.series[0].label.normal.show = false; // 设置点位标签隐藏于显示

            mapChart.setOption(mapOption);// 把加工好的mapOption注入echarts api。
            // 数据加载项，增强用户体验
            mapChart.hideLoading();
        });
    }
    /*
     * 设置覆盖物鼠标移上去的展示形式，此处可以自定义，可以做成弹出框等等
     */
    var displayContent = function (params)
    {
        return params.name + '：' + params.value[2];
    }
</script>
</html>